SpatialAudioRenderer2DRenders a 2D scene of SpatialAudioSource instances relative to a single SpatialAudioListener. Voices are panned left and right with a StereoPannerNode. The z coordinate of sources is ignored.
Extends SpatialAudioRenderer, which provides the master channel, reverb, limiter, distance attenuation, lowpass and clustering.
The listener rotation is optional. With the default rotation of 0 the listener faces up on the screen, so left and right on the screen are left and right in the stereo image. Games without a rotating listener do not have to set a rotation at all.
import { SpatialAudioRenderer2D, AudioClip, loadAudioSource } from "@fluex/fluexgl-dsp";
const renderer = new SpatialAudioRenderer2D(audioDevice, { maxDistance: 1600 });
const data = await loadAudioSource("/sounds/campfire.ogg");
const clip = new AudioClip(data);
const campfire = renderer.createSource({ position: { x: 400, y: 300 } });
campfire.attachAudioClip(clip);
clip.setLoop(true).play();
renderer.start();
// In your game loop:
renderer.listener.setPosition(player.x, player.y);
new SpatialAudioRenderer2D(target: AudioDevice | AudioContext, options?: Partial<SpatialAudioRenderer2DOptions>): SpatialAudioRenderer2D;
target: AudioDevice | AudioContext - Where the renderer's master channel is created. See SpatialAudioRenderer.options?: Partial<SpatialAudioRenderer2DOptions> - Renderer configuration. Every field is optional.| Option | Default |
|---|---|
| yAxis | "down" |
| refDistance | 50 |
| maxDistance | 1500 |
| clustering.splitDistance | 300 |
| clustering.mergeDistance | 400 |
| maxVoices | 64 |
All other defaults are listed in SpatialAudioRendererOptions.
All properties of SpatialAudioRenderer, plus:
listener: SpatialAudioListenerThe SpatialAudioListener of this renderer. Every renderer has exactly one listener. Its yAxis is kept in sync with the renderer.
yAxis: SpatialYAxisDirectionDirection of the y-axis on screen: "down" for canvas-like coordinates (default), "up" for math-like coordinates. See SpatialYAxisDirection.
All methods of SpatialAudioRenderer, plus:
setSpatialAudioListener(listener: SpatialAudioListener): SpatialAudioRenderer2DReplaces the listener of this renderer. The listener's yAxis is set to the renderer's yAxis.
listener: SpatialAudioListener - The new listener.SpatialAudioRenderer2D - The same renderer.In a side-scroller, sources below the listener are not "behind" it. Set rearLowpassFactor: 1 to disable the extra lowpass for sources behind the listener:
const renderer = new SpatialAudioRenderer2D(audioDevice, { rearLowpassFactor: 1 });
For top-down games where the player rotates, update the rotation every frame, for example with lookAt():
renderer.listener.setPosition(player.x, player.y).lookAt(mouse.x, mouse.y);
This class does not emit any events.
Inherited from SpatialAudioRenderer (isRunning).